<template>
	<div id="page">
		<nav-bar></nav-bar>

		<!-- <iframe src="https://hk-y0059.oss-cn-hongkong.aliyuncs.com/white_paper.pdf" class="main" width="" height=""></iframe> -->
		<div class="main" ref="MainScroll" @scroll="S_Load()">
			<div v-for="(item,index) in paper" >
				<img v-if="index < page" class="white_paper" :src="item" >
			</div>

			<div ref="end" class="Loading"></div>
		</div>
	</div>
</template>

<script>
	import navBar from "../components/navBar.vue"
	export default {
		name:"paper",
		components:{navBar},
		data() {
			return {
				page:5,
				paper:[
          require('../assets/paper/1.jpg'),
          require('../assets/paper/2.jpg'),
          require('../assets/paper/3.jpg'),
          require('../assets/paper/4.jpg'),
          require('../assets/paper/5.jpg'),
          require('../assets/paper/6.jpg'),
          require('../assets/paper/7.jpg'),
          require('../assets/paper/8.jpg'),
          require('../assets/paper/9.jpg'),
          require('../assets/paper/10.jpg'),

          require('../assets/paper/11.jpg'),
          require('../assets/paper/12.jpg'),
          require('../assets/paper/13.jpg'),
          require('../assets/paper/14.jpg'),
          require('../assets/paper/15.jpg'),
          require('../assets/paper/16.jpg'),
          require('../assets/paper/17.jpg'),
          require('../assets/paper/18.jpg'),
          require('../assets/paper/19.jpg'),
          require('../assets/paper/20.jpg'),

          require('../assets/paper/21.jpg'),
          require('../assets/paper/22.jpg'),
          require('../assets/paper/23.jpg'),
          require('../assets/paper/24.jpg'),
          require('../assets/paper/25.jpg'),
          require('../assets/paper/26.jpg'),
          require('../assets/paper/27.jpg'),
          require('../assets/paper/28.jpg'),
          require('../assets/paper/29.jpg'),
          require('../assets/paper/30.jpg'),

          require('../assets/paper/31.jpg'),
          require('../assets/paper/32.jpg'),
          require('../assets/paper/33.jpg'),
          require('../assets/paper/34.jpg'),
          require('../assets/paper/35.jpg'),
          require('../assets/paper/36.jpg'),
          require('../assets/paper/37.jpg'),
          require('../assets/paper/38.jpg'),
          require('../assets/paper/39.jpg'),
          require('../assets/paper/40.jpg'),


					// 'https://hk-y0059.oss-cn-hongkong.aliyuncs.com/1650947931white_paper-40.jpg',
				],


			}
		},
		methods: {
			S_Load(){//监听滚动
				var top = this.$refs.MainScroll.scrollTop;	//滚动
				var m_height =  this.$refs.MainScroll.offsetHeight;

				var end = this.$refs.end.offsetTop;

				if(top+m_height+50 > end){
					this.page = this.page + 5
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	#page{
		background: #FFF;
	}
	.main {
		margin-top: 120px;
		height: calc(100% - 120px);
		position: relative;  z-index: 1;
		text-align: center;
		overflow: scroll;
		background: #f4f5ef;
	}

	.white_paper{
		width: 100%;
		min-height: 500px;
	}


</style>
